<!--
 * @Author: 杨光辉(GerhardYang)
 * @Date: 2020-12-14 13:09:23
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-10-03 20:27:51
 * @Description: file content
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->

<template>
  <div id="basemap" @mouseleave="fadeOutMap">
    <div :class="[isveccvaNActive ? fadeOut_map : basemap_map]">
      <div class="veccva" @mouseenter="showAllBaseMap" @click="changeToVeccva">
        <p>矢量</p>
      </div>
    </div>
    <div :class="[isimgciaNActive ? fadeOut_map : basemap_map]">
      <div class="imgcia" @mouseenter="showAllBaseMap" @click="changeToImgcia">
        <p>卫星</p>
      </div>
    </div>
    <div :class="[isiearth3dNActive ? fadeOut_map : basemap_map]">
      <div
        class="iearth3d"
        @mouseenter="showAllBaseMap"
        @click="changeToiearth3d"
      >
        <p>场景</p>
      </div>
    </div>
  </div>
</template>

<script>
import L from "leaflet";
import { showBottomPanel, hideBottomPanel } from "@/utils/divResize";
export default {
  data() {
    return {
      activeLayer: "veccva",
      isbottom: false,
      basemap_map: "basemap_map",
      fadeOut_map: "fadeOut_map ",
      isveccvaNActive: false,
      isimgciaNActive: false,
      isiearth3dNActive: false,
      isiearth: false,
    };
  },
  computed: {
    SearchLayers() {
      return this.$store.state.config.SearchLayers;
    },
    SceneLayer() {
      return this.$store.state.config.SceneLayer;
    },
  },
  mounted() {
    this.fadeOutMap();
  },
  methods: {
    showbottom() {
      if (this.isiearth) {
        if (this.isbottom) {
          showBottomPanel();
          this.isbottom = true;
        } else {
          hideBottomPanel();
          this.isbottom = false;
        }
        this.isiearth = false;
      } else {
        if (this.activeLayer != "iearth3d") this.recodBottomStatus();
        if (this.isbottom) {
          showBottomPanel();
        } else {
          hideBottomPanel();
        }
      }
    },
    showAllBaseMap: function () {
      this.isveccvaNActive = false;
      this.isimgciaNActive = false;
      this.isiearth3dNActive = false;
    },
    changeddisplay: function (fadeOut) {
      fadeOut[0].style.display = "none";
      fadeOut[1].style.display = "none";
    },
    fadeOutMap() {
      this.isveccvaNActive = true;
      this.isimgciaNActive = true;
      this.isiearth3dNActive = true;
      this["is" + this.activeLayer + "NActive"] = false;
      //let fadeOut = document.getElementsByClassName('fadeOut_map')
    },

    changeToImgcia: function () {
      this.activeLayer = "imgcia";
      this.hideScene3Divs();
      this.showbottom();
      this.$store.state.veccvaLayerGroup.clearLayers();
      this.$store.state.imgciaLayerGroup.clearLayers();
      if (this.SearchLayers !== {}) {
        this.SearchLayers.map((item) => {
          if (item.typeText == "影像地图") {
            // L.supermap
            //   .tiledMapLayer(item.url, { noWrap: true })
            //   .addTo(this.$store.state.imgciaLayerGroup)
            //   .setZIndex(3);
            L.supermap
              .wmtsLayer(item.url, {
                style: "default",
                tilematrixSet: "EPSG:3857",
                format: "image/png",
                Request: "GetTile",
                requestEncoding: "KVP",
                errorTileUrl: "@/assets/imgs/nopng.png",
                bounds: [
                  [24.62, 108.783],
                  [30.13, 114.25],
                ],
              })
              .addTo(this.$store.state.imgciaLayerGroup)
              .setZIndex(2);
          }
          if (item.typeText == "影像标签") {
            L.supermap
              .tiledMapLayer(item.url, {
                noWrap: true,
                maxZoom: 21,
                bounds: [
                  [24.62, 108.783],
                  [30.13, 114.25],
                ],
              })
              .addTo(this.$store.state.imgciaLayerGroup)
              .setZIndex(3)
              .setOpacity(0.65);
          }
        });
      }
    },
    recodBottomStatus() {
      document.getElementById("basemap").style.bottom == "15px" ||
      document.getElementById("basemap").style.bottom == ""
        ? (this.isbottom = false)
        : (this.isbottom = true);
    },
    changeToVeccva: function () {
      this.activeLayer = "veccva";
      this.hideScene3Divs();
      this.showbottom();
      this.$store.state.veccvaLayerGroup.clearLayers();
      this.$store.state.imgciaLayerGroup.clearLayers();
      if (this.SearchLayers !== {}) {
        this.SearchLayers.map((item) => {
          let layerUrl = window.getServiceUrl(
            item.url,
            window.servicesPorts.iserver
          );
          if (item.typeText == "矢量地图") {
            L.supermap
              .tiledMapLayer(layerUrl, {
                noWrap: true,
                prjCoordSys: { epsgCode: 3857 },
              })
              .addTo(this.$store.state.veccvaLayerGroup)
              .setZIndex(2);
          }
          if (item.typeText == "矢量标签") {
            L.supermap
              .tiledMapLayer(layerUrl, {
                noWrap: true,
                prjCoordSys: { epsgCode: 3857 },
              })
              .addTo(this.$store.state.veccvaLayerGroup)
              .setZIndex(2);
          }
        });
      }
    },
    changeToiearth3d: function () {
      this.activeLayer = "iearth3d";
      //打开三维时将底栏放到最底
      this.recodBottomStatus();
      hideBottomPanel();
      this.hideScene3Divs();
      this.isiearth = true;
      this.$store.state.veccvaLayerGroup.clearLayers();
      this.$store.state.imgciaLayerGroup.clearLayers();
      let is3Diframe = document.getElementById("scene-iframe");
      if (is3Diframe) {
        document.getElementById("scene").style.display = "block";
        return;
      }

      let scenediv = document.getElementById("scene");
      let iframe = document.createElement("iframe");
      iframe.id = "scene-iframe";
      iframe.src = this.SceneLayer.url;
      iframe.width = "100%";
      iframe.height = "100%";
      scenediv.appendChild(iframe);
      this.showScene3Divs();
    },
    showScene3Divs: function () {
      document.getElementById("scene").style.display = "block";
    },
    hideScene3Divs: function () {
      document.getElementById("scene").style.display = "none";
    },
  },
};
</script>

<style lang="less" scoped>
@display: none;
@keyframes fadeIn {
  from {
    opacity: 0;
    width: 10px;
    margin-left: 0px;
  }
  to {
    opacity: 1;
    width: 60px;
    margin-left: 15px;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    width: 60px;
    margin-left: 15px;
  }
  to {
    opacity: 0;
    width: 10px;
    margin-left: 0px;
  }
}

#basemap {
  position: absolute;
  bottom: 15px;
  //right: 50px;
  left: 10px;
  z-index: 99;
  background-color: #ffffff0d;
  border: 0px solid #ddd;
  padding: 0px 0px 0px 0;
  display: inline-block;
  //width: 90px;
  //   transition: width 2s;
  //   -webkit-transition: width 2s; /* Safari */
  .fadeOut_map {
    width: 90px;
    height: 60px;
    float: left;
    border: 0px solid #ddd;
    margin-left: 15px;
    cursor: pointer;
    animation: fadeOut 0.3s linear;
    display: none;
  }
  .basemap_map {
    width: 90px;
    height: 60px;
    float: left;
    border: 0px solid #ddd;
    margin-left: 15px;
    cursor: pointer;
    animation: fadeIn 0.3s linear;
    .veccva {
      width: 100%;
      height: 100%;
      border: thin solid @themeBackgroundColor;
      user-select: none;
      background-image: url("../../assets/imgs/tdtvec.png");
      background-size: cover;
      border-radius: 0.5rem;
      color: #333;
    }

    .imgcia {
      width: 100%;
      height: 100%;
      background-image: url("../../assets/imgs/tdtimg.png");
      background-size: cover;
      border-radius: 0.5rem;
      border: thin solid @themeBackgroundColor;
      user-select: none;
      color: #ffff;
    }

    .iearth3d {
      width: 100%;
      height: 100%;
      user-select: none;
      border: thin solid @themeBackgroundColor;
      background-image: url("../../assets/imgs/3d.png");
      background-size: cover;
      border-radius: 0.5rem;
      color: #ffff;
    }
  }
}
</style>
